import { IFormProps, size, formItemLayout, getUploadResult, productPage, getImages, getFileList } from '../../utils/common';
import React from 'react';
import { Modal, Form, Input, Select, Upload, Checkbox } from 'antd';
import * as api from '../../api/api';
import { FormComponentProps } from 'antd/lib/form';
import Uploads from '../Uploads';
const TextArea = Input.TextArea;
export interface IBannerEditProps extends FormComponentProps {
    visible: boolean,
    banner?: api.SingleUserMallMallVOBannerVO,
    onSave: (any) => void,
    onCancel: () => void,
}
class BannerEdit extends React.PureComponent<IBannerEditProps, any>{
    constructor(props) {
        super(props);
    }

    state = {
        fileList: [],
        hideUrl: false,
    }

    componentDidMount() {
        const images = this.props.banner && this.props.banner.picture;
        this.setState({ fileList: getFileList(images) });
    }

    ok = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, form) => {
            if (!err) {
                form['picture'] = getImages(this.state.fileList);
                this.props.onSave(form);
            }
        });
    }

    cancel = () => {
        this.props.onCancel();
    }

    imageChange = (fileList) => {
        this.setState({ fileList });
    }

    typeChange = (value) => {
        if (value === 'none') {
            this.setState({ hideUrl: true });
        }
        else {
            this.setState({ hideUrl: false });
        }
        switch (value) {
            case 'www':
                this.props.form.setFieldsValue({ url: '' });
                break;
            case 'product':
                this.props.form.setFieldsValue({ url: productPage });
                break;
        }
    }

    render(): JSX.Element {
        const { getFieldDecorator } = this.props.form;
        const { banner } = this.props;
        const { fileList, hideUrl } = this.state;
        return (
            <Modal
                title='首页导航信息'
                visible={this.props.visible}
                onOk={this.ok}
                onCancel={this.cancel}
                maskClosable={true}
            >
                <Form>
                    <Form.Item label="导航图片" {...formItemLayout}>
                        {getFieldDecorator('picture', {
                            rules: [{
                                required: true,
                                message: '请上传导航图片'
                            }],
                            initialValue: banner && banner.picture
                        })
                            (<Uploads editable={this.props.visible} fileList={fileList} onChange={this.imageChange} />)}

                    </Form.Item>
                    {!hideUrl ? (
                        <Form.Item label="导航链接" {...formItemLayout}>
                            {getFieldDecorator('url', {
                                initialValue: banner && banner.url
                            })(<TextArea
                                placeholder="请输入导航链接" />)}
                        </Form.Item>
                    ) : (undefined)}
                    <Form.Item label='显示方式' {...formItemLayout}>
                        {getFieldDecorator('bannerLocation', {
                            initialValue: banner && banner.bannerLocation
                        })(
                            <Select>
                                <Select.Option value={0}>上部广告</Select.Option>
                                <Select.Option value={1}>中部广告</Select.Option>
                                {/* <Select.Option value={2}>抢购图</Select.Option> */}
                                <Select.Option value={3}>团购图</Select.Option>
                                {/* <Select.Option value={4}>有好货图</Select.Option>
                                <Select.Option value={5}>批发中心图标</Select.Option>
                                <Select.Option value={6}>代理入口图标</Select.Option>
                                <Select.Option value={7}>张健品牌图标</Select.Option>
                                <Select.Option value={8}>农副产品图标</Select.Option>
                                <Select.Option value={10}>数字货币图标</Select.Option>
                                <Select.Option value={11}>积分商城图标</Select.Option>
                                <Select.Option value={12}>代理商城图标</Select.Option>
                                <Select.Option value={13}>信用卡中心图标</Select.Option> */}
                                <Select.Option value={9}>二维码背景图</Select.Option>
                                <Select.Option value={14}>代理中心说明图</Select.Option>
                            </Select>)}
                    </Form.Item>
                    <Form.Item label="是否启用" {...formItemLayout}>
                        {getFieldDecorator('enabled', {
                            valuePropName: 'checked',
                            initialValue: banner && banner.enabled
                        })(<Checkbox />)}
                    </Form.Item>
                </Form>
            </Modal>)
    }
}

export default Form.create()(BannerEdit);
